<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <div id="box">
        <div id="survey">
        <p>问卷调查</p> 
        </div>
        <div id="select">
            <div>
                <input type="radio" id="checkAll" name="select">全选
                <input type="radio" id="unCheckAll" name="select">全不选
                <input type="radio" id="reverseCheck" name="select">反选
            </div>
            <div>
                <input type="checkbox" class="check-only">刘德华
                <input type="checkbox" class="check-only">张学友
                <input type="checkbox" class="check-only">孙燕姿
                <input type="checkbox" class="check-only">刘欢
            </div>
        </div>
    </div>
    <script>
        var checkAll = document.getElementById('checkAll');
        var unCheckAll = document.getElementById('unCheckAll');
        var reverseCheck = document.getElementById('reverseCheck');
        var checkList = document.getElementsByClassName('check-only');
        //全选
        checkAll.onclick=function(){
            for(var i=0;i<checkList.length;i++){
                checkList[i].checked=true;
            }
        }
        // 全不选
        unCheckAll.onclick=function(){
            for(var i = 0;i<checkList.length;i++){
                checkList[i].checked = false;
            }
        }
        // 反选
        reverseCheck.onclick=function(){
            for(var i = 0;i<checkList.length;i++){
                checkList[i].checked = !checkList[i].checked;
            }
        }
    </script>
</body>
</html>